<style lang="scss" scoped src="./app.component.scss"></style>
<template>
	<div class="container-app">
		<div class="name-app">
			app component
		</div>
		<app-index class="comp-index"></app-index>
		<app-main class="comp-main"></app-main>
	</div>
</template>
<script lang="ts">
import { defineComponent, provide } from 'vue';
import AppIndex from "@/app/view/index/index.component.vue";
import AppMain from "@/app/view/main/main.component.vue";
import { InnerMqService } from './rx/service/inner-mq.service';
import type { InnerMqClient } from '@/app/rx/client/inner-mq.client';
import { Topic } from "@/app/rx/topic";

export default defineComponent({
	name: 'app-root',
	components: {
		AppIndex, AppMain,
	},
	setup() {
		const innerMqService = new InnerMqService();
		provide('innerMqService', innerMqService);
		let client!: InnerMqClient;
		return {
			innerMqService, client,
		}
	},
	created() {
		this.client = this.innerMqService.createClient();
		this.client.sub(Topic.MY_TP_1, (res: string) => {
			console.log(res);
		});
	},
	beforeUnmount() {
		this.innerMqService.destroyClient(this.client);
	},
});
</script>
